<template>
	<el-button type="primary" text @click="add">
		增加
	</el-button>
	<!-- Form增加 -->
	<el-dialog v-model="dialogFormVisible" title="抽奖项目">
		<el-form :model="form">
			<el-form-item label="主题" :label-width="formLabelWidth">
				<el-input v-model="form.name" autocomplete="off" />
			</el-form-item>
			<el-form-item label="活动类型" :label-width="formLabelWidth">
				<el-select v-model="form.types" placeholder="请选择活动类型" size="large" >
					<el-option v-for="item in optionshd" :key="item.value" :label="item.label" :value="item.value"/>
				</el-select>
			</el-form-item>
			<el-form-item label="奖品名称" :label-width="formLabelWidth" v-if="form.types == 0">
				<el-input v-model="form.title" autocomplete="off" />
			</el-form-item>
			<el-form-item label="奖品数量" :label-width="formLabelWidth" v-if="form.types == 0">
				<el-input v-model="form.num" autocomplete="off" />
			</el-form-item>
			<el-form-item label="抽奖状态" :label-width="formLabelWidth">
				<el-select v-model="form.cjzt" placeholder="请选择抽奖状态" size="large">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item label="轮数" :label-width="formLabelWidth" v-if="form.types == 2">
				<el-input v-model="form.lunsu" autocomplete="off" />
			</el-form-item>
			<el-form-item label="参与时间" :label-width="formLabelWidth" v-if="form.types == 2">
				<el-date-picker :disabledDate="disabledDateFun" v-model="form.cytime" type="datetime" placeholder="选择日期" />
				
			</el-form-item>
			<el-form-item label="开奖时间" :label-width="formLabelWidth">
				<el-date-picker :disabledDate="disabledDateFun" v-model="form.kjtime" type="datetime" placeholder="选择日期" />
			</el-form-item>
			<el-form-item label="奖品详情图" :label-width="formLabelWidth" v-if="form.types == 2">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfiles`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'jpimg' }) }">
					<img v-if="form.jpimg" :src="ifImgHeader(form.jpimg)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			
			
			<el-form-item label="缩略图" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfiles`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'img' }) }">
					<img v-if="form.img" :src="ifImgHeader(form.img)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="详情图片" :label-width="formLabelWidth">
				<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goodses/uploadfile`" :data="jm()"
					:show-file-list="false" :on-success="(file) => { editImgsProps({ file, key: 'images' }) }">
					<img v-if="form.images" :src="ifImgHeader(form.images)" class="avatar" />
					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</el-form-item>
			<el-form-item label="推文链接" :label-width="formLabelWidth">
				<el-input v-model="form.twlink" autocomplete="off" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取消</el-button>
				<el-button type="primary" @click="postData">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>


	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="name" label="主题" width="320" align="center" />
		<el-table-column fixed prop="title" label="奖品名称" width="420" align="center" />
		<el-table-column fixed prop="num" label="奖品数量" width="100" align="center" />
		<el-table-column prop="cjzt" label="抽奖状态" width="200" align="center">
			<template #default="scope">
				<!-- 插值表达式支持函数执行 并且渲染的是函数的return值 -->
				{{ formatEmployment(scope.row.cjzt) }}
			</template>
		</el-table-column>
		<el-table-column prop="cytime" label="参与时间" width="150" align="center">
			<template #default="scope">
				{{ getLocalTime(scope.row.cytime)}}
			</template>
		</el-table-column>
		<el-table-column  prop="total" label="参与总人数" width="100" align="center" />
		<el-table-column prop="kjtime" label="开奖时间" width="150" align="center">
			<template #default="scope">
				{{ getLocalTime(scope.row.kjtime) }}
			</template>
		</el-table-column>
		<el-table-column prop="img" label="缩略图" width="150" align="center">
			<template #default="scope">
				<img style="width: 100px; height: 100px" :src="HttpImg + scope.row.img">
			</template>
		</el-table-column>
		<el-table-column prop="images" label="详情图片" width="150" align="center">
			<template #default="scope">
				<img style="width: 100px; height: 100px" :src="HttpImg + scope.row.images">
			</template>
		</el-table-column>
		<el-table-column  prop="twlink" label="推文链接" width="300" align="center" />

		<el-table-column fixed="right" label="操作" align="center">
			<template #default="scope">
				<el-button link type="primary" @click="tj(scope.row.id,scope.row.name)"
					v-if="scope.row.types == 1 || scope.row.types == 2">添加奖项</el-button>
				<el-button link type="primary" @click="eid(scope.row.id)">修改</el-button>
				<el-button link type="danger" @click="del(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<el-dialog v-model="dialogjx" title="添加奖项">
		<el-table :data="jxlist" style="width: 100%">
			<el-table-column fixed prop="paim" label="奖项" width="120" align="center" />
			<el-table-column fixed prop="contents" label="奖品名称" width="220" align="center" />
			<el-table-column fixed prop="zjrs" label="奖品数量" width="120" align="center" />
			<el-table-column fixed="right" label="操作" align="center">
				<template #default="scope">
					<el-button link type="danger" @click="deljx(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-form :model="jxform">
			<el-form-item label="奖项" :label-width="formLabelWidth">
				<el-input v-model="jxform.paim" autocomplete="off" />
			</el-form-item>
			<el-form-item label="奖品名称" :label-width="formLabelWidth">
				<el-input v-model="jxform.contents" autocomplete="off" />
			</el-form-item>
			<el-form-item label="奖品数量" :label-width="formLabelWidth">
				<el-input v-model="jxform.zjrs" autocomplete="off" />
			</el-form-item>
		</el-form>
		<div style="text-align: center;">
			<el-button type="primary" text @click="addjx">
				添加奖项
			</el-button>
		</div>
	</el-dialog>
</template>
<script>
import UploadFile from 'element-plus'
import {
	ElMessageBox,
	ElMessage
} from 'element-plus'
export default {
	components: {
		[UploadFile.name]: UploadFile
	},
	data() {
		return {
			HttpImg: "http://gyycadmincss.hansn.cn",
			tableData: [],
			jxlist: [],
			jxform: [],
			form: [],
			form1: [],
			dialogFormVisible: false,
			dialogFormVisible1: false,
			dialogjx: false,
			formLabelWidth: '120px',
			imageUrl: "",
			options: [{
				value: '0',
				label: '未发布'
			}, {
				value: '1',
				label: '活动中'
			}],
			optionshd: [{
				value: '0',
				label: '普通抽奖'
			},
			{
				value: '1',
				label: '大型抽奖'
			},
			{
				value: '2',
				label: '519抽奖'
			}
			],
			optionscysj:[
				{
				value: '0',
				label: '10:00'
			},
			{
				value: '1',
				label: '14:00'
			},
			],
			value: '',
			id: '',
			hdid: "",
			hdname: ""
		}
	},
	mounted() {
		this.getData()
	},
	methods: {
		
		tj(id,name) {
			this.dialogjx = true;
			this.hdid = id;
			this.hdname=name;
			this.getjxlist()
		},
		add() {
			this.form.name = "";
			this.form.kjtime = "";
			this.form.cjzt = "";
			this.form.images = "";
			this.form.img = "";
			this.form.title = "";
			this.form.num = "";
			this.dialogFormVisible = true;
			this.id = ""
			this.form.twlink=""
			this.form.types = undefined
			this.form.lunsu="";
			this.form.cytime=""
		},
		addjx() {
			let data = {
				id: this.hdid,
				name: this.hdname,
				contents: this.jxform.contents,
				paim: this.jxform.paim,
				zjrs: this.jxform.zjrs,
			}
			this.$http.post("/index.php/index/admincj/bigcjjpdj", data).then(res => {
				if (res.code == 200) {
					this.getjxlist()
					ElMessage({
						message: '添加成功',
						type: 'success',
					})
					this.jxform=[]
				}
			})
		},
		deljx(id) {
			ElMessageBox.confirm(
				'是否确定删除?',
				'', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					this.$http.post("/index.php/index/admincj/bigcjjpdjdel", {
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.getjxlist()
							ElMessage({
								message: '删除成功',
								type: 'success',
							})
						}
					})
				})
				.catch(() => {

				})
		},
		getjxlist() {
			this.$http.post("/index.php/index/admincj/bigcjjpdjlist", {
				id: this.hdid
			}).then(res => {
				if (res.code == 200) {
					this.jxlist = res.data;
				}
			})
		},
		del(id) {
			ElMessageBox.confirm(
				'是否确定删除?',
				'', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
			)
				.then(() => {
					this.$http.post("/index.php/index/goodses/cjdel", {
						id: id
					}).then(res => {
						if (res.code == 200) {
							this.getData()
							ElMessage({
								message: '删除成功',
								type: 'success',
							})
						}
					})
				})
				.catch(() => {

				})
		},
		eid(id) {
			this.dialogFormVisible = true;
			this.id = id;
			this.$http.post("index.php/index/goodses/cjshow", {
				id: id
			}).then(res => {
				if (res.code == 200) {
					this.form = res.data[0]
					this.form.kjtime = this.getLocalTime(res.data[0].kjtime)
					this.form.cytime = this.getLocalTime(res.data[0].cytime)
					if (res.data[0].cjzt == '0') {
						this.value = "未发布"
					} else if (res.data[0].cjzt == '1') {
						this.value = "活动中"
					} else {
						this.value = "已结束"
					}

					console.log("kjtime", this.form.kjtime)
					console.log("cjzt", this.value)
				}
			})
		},
		// updateData() {
		// 	let data1 = {
		// 		id: this.form1.id,
		// 		name: this.form1.name,
		// 		cjzt: this.form1.cjzt,
		// 		kjtime:this.getTimeFormat(this.form1.kjtime),
		// 		images: this.form1.images,
		// 		twlink: this.form1.twlink,
		// 	}
		// 	console.log(data1)
		// 	this.$http.post("/index.php/index/goodses/cjupdate", data1).then(res => {
		// 		if (res.code == 200) {
		// 			this.dialogFormVisible1 = false;
		// 			this.getData()
		// 		 }
		// 	 })
		// },
		getData() {
			this.tableData = []
			this.$http.post("/index.php/index/goodses/setcjshow").then(res => {
				console.log(res)
				this.tableData = res.data;
			})
		},
		postData() {
			// this.form.cjzt = this.value;
			let data = {
				name: this.form.name,
				cjzt: this.form.cjzt,
				kjtime: this.getTimeFormat(this.form.kjtime),
				images: this.form.images,
				img: this.form.img,
				title: this.form.title,
				num: this.form.num,
				twlink: this.form.twlink,
				id: this.id,
				types: this.form.types,
				cytime: this.getTimeFormat(this.form.cytime),
				jpimg: this.form.jpimg,
				lunsu: this.form.lunsu
			}
			this.$http.post(this.id ? "/index.php/index/goodses/cjupdate" : "/index.php/index/goodses/cjadd", data).then(res => {
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.id = ""
					ElMessage({
						message: this.id ? '编辑成功' : '新增成功',
						type: 'success',
					})
					this.getData()
				}
			})
		},
		getTimeFormat(zcTime) {
			let time = (new Date(zcTime).getTime()) / 1000; //除1000 是变成秒级的时间戳 不除就是毫秒级
			return time;
		},
		disabledDateFun(time) {
			return time.getTime() < Date.now() - 8.64e7;
		},
		formatEmployment(type) {
			// 根据源数据经过处理 把处理之后的数据返回
			// 定义一个映射结构
			const map = {
				0: '未发布',
				1: '活动中',
				2: '已结束',
			}
			return map[type]
		},
		getLocalTime(nS) {
			return new Date(parseInt(nS) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ');
		}
	}
}
</script>
<style scoped>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}

.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}

.avatar {
	width: 178px;
	height: 178px;
	display: block;

}
</style>
